'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts'
import { CandlestickChart } from '@/components/charts/candlestick-chart'

interface ChartSectionProps {
  symbol: string
  timeframe: string
  data: any
}

export function ChartSection({ symbol, timeframe, data }: ChartSectionProps) {
  const [activeTab, setActiveTab] = useState('price')

  // Mock data for demonstration
  const chartData = data?.candles || [
    { time: '00:00', open: 45000, high: 45500, low: 44800, close: 45200, volume: 1200 },
    { time: '04:00', open: 45200, high: 45800, low: 45100, close: 45600, volume: 1500 },
    { time: '08:00', open: 45600, high: 46200, low: 45400, close: 46000, volume: 1800 },
    { time: '12:00', open: 46000, high: 46500, low: 45800, close: 46300, volume: 2200 },
    { time: '16:00', open: 46300, high: 46800, low: 46100, close: 46600, volume: 2000 },
    { time: '20:00', open: 46600, high: 47000, low: 46400, close: 46800, volume: 1700 },
  ]

  const volumeData = chartData.map(d => ({
    time: d.time,
    volume: d.volume
  }))

  return (
    <Card>
      <CardHeader>
        <CardTitle>{symbol} Price Chart</CardTitle>
      </CardHeader>
      <CardContent>
        <Tabs value={activeTab} onValueChange={setActiveTab}>
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="price">Price</TabsTrigger>
            <TabsTrigger value="volume">Volume</TabsTrigger>
            <TabsTrigger value="technical">Technical</TabsTrigger>
          </TabsList>
          
          <TabsContent value="price" className="space-y-4">
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <CandlestickChart data={chartData} />
              </ResponsiveContainer>
            </div>
          </TabsContent>
          
          <TabsContent value="volume" className="space-y-4">
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <AreaChart data={volumeData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <Tooltip />
                  <Area 
                    type="monotone" 
                    dataKey="volume" 
                    stroke="#8884d8" 
                    fill="#8884d8" 
                    fillOpacity={0.6}
                  />
                </AreaChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>
          
          <TabsContent value="technical" className="space-y-4">
            <div className="h-[400px]">
              <ResponsiveContainer width="100%" height="100%">
                <LineChart data={chartData}>
                  <CartesianGrid strokeDasharray="3 3" />
                  <XAxis dataKey="time" />
                  <YAxis />
                  <Tooltip />
                  <Line 
                    type="monotone" 
                    dataKey="close" 
                    stroke="#8884d8" 
                    strokeWidth={2}
                    dot={false}
                  />
                  <Line 
                    type="monotone" 
                    dataKey="high" 
                    stroke="#82ca9d" 
                    strokeWidth={1}
                    strokeDasharray="5 5"
                    dot={false}
                  />
                  <Line 
                    type="monotone" 
                    dataKey="low" 
                    stroke="#ff7300" 
                    strokeWidth={1}
                    strokeDasharray="5 5"
                    dot={false}
                  />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </TabsContent>
        </Tabs>
      </CardContent>
    </Card>
  )
}
